import { createBlog, getBlog, changeBlog } from '@/network/api/abstract'
import { getTagsData } from '@/network/api/tags'
import { randomId } from '@/utils/common'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'

export const useTagsDataHook = () => {
    const tags = ref([])
    const getTagsDataFunc = async () => {
        const res = await getTagsData()
        tags.value = res?.result || [{ id: '', name: '' }]
    }
    return {
        getTagsDataFunc,
        tags
    }
}

export const useBlogFormEffect = (route, router) => {
    const { contentId } = route.query
    // 后端所需参数
    const fileList = ref([])
    const elUpload = ref(null)
    const tagsWrapper = ref(null)
    const selectTag = ref([])
    const blogForm = reactive({
        id: randomId(),
        title: '',
        article: '',
        topImg: '',
        categoryArr: [],
        contentId: randomId(),
        content: '',
        isTop: Math.ceil(Math.random() * 4)
    })
    // 修改
    const setBlogForm = async (id) => {
        const res = await getBlog(id)
        console.log(res)
        blogForm.id = res?.result[0]?.id
        blogForm.contentId = res?.result[0]?.content_id
        blogForm.title = res?.result[0]?.title || ''
        blogForm.article = res?.result[0]?.article || ''
        blogForm.content = res?.result[0]?.content || ''
        fileList.value.push({ name: 'pic.png', url: res?.result[0]?.top_img })
        selectTag.value = res?.result[0]?.category_arr?.split(',')
        console.log(selectTag)
        // top_img,category_arr
    }
    // 保存
    const save = () => {
        if (contentId) {
            const data1 = {
                id: blogForm.id,
                title: blogForm.title,
                article: blogForm.article,
                category_arr: selectTag.value.toString(),
                top_img: fileList.value[0].url
            }
            const data2 = {
                id: blogForm.contentId,
                content: blogForm.content
            }
            changeBlog(data1, data2).then(res => {
                if (res[0].status == 200 && res[1].status == 200) {
                    ElMessage.success('修改成功')
                    blogForm.title = ''
                    blogForm.article = ''
                    blogForm.content = ''
                    elUpload.value.clearFiles()
                    tagsWrapper.value.createBlogSuccess()
                    router.push('/home/index')
                }
            })
            return
        }
        createBlog(blogForm).then(res => {
            if (res.status === 200) {
                ElMessage.success(res.msg)
                // 当创建文章成功时把内容清空
                blogForm.title = ''
                blogForm.article = ''
                blogForm.content = ''
                // clearFiles() element 自带方法 tagsWrapper 清空多选框选中
                elUpload.value.clearFiles()
                tagsWrapper.value.createBlogSuccess()
            }
        })
    }
    const changeSelectTag = (data) => {
        selectTag.value = data
        blogForm.categoryArr = data.toString()
    }
    // 上传头图成功之后的回调函数
    const handleUploadSuccess = (file) => {
        console.log(file)
        blogForm.topImg = file.filepath
        fileList.value = [{ name: 'top_img', url: file.filepath }]
    }
    // 执行函数
    if (contentId) {
        setBlogForm(contentId)
    }
    return {
        blogForm,
        fileList,
        tagsWrapper,
        elUpload,
        selectTag,
        changeSelectTag,
        save,
        setBlogForm,
        handleUploadSuccess
    }
}

